<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minmun-scale=1.0">
    <title>我的计划</title>
    <link rel="stylesheet" href="../../public/css/myPlan/reset.css">
    <link rel="stylesheet" href="../../public/css/myPlan/myTodo.css">
    <link rel="stylesheet" href="../../public/css/myPlan/index.css">
    <link rel="stylesheet" href="../../public/css/myPlan/longTodo.css">
    <script src="../../public/js/myPlan/selfApi.js"></script>
    <script src="../../public/js/myPlan/longTodoApi.js"></script>
    <script src="../../public/js/myPlan/myTodo.js"></script>

    <!-- <script src="../../public/js/longTodo.js"></script> -->
</head>

<body>
<!--外部容器-->
<div class="top-bar-wrapper">
    <!-- 中间主体部分容器 -->
    <div class="top-bar">

        <!-- 网站的logo -->
        <h1 class="logo">
            <!-- 此处建议写上网站首页的地址 -->
            <a href="#">
                <img src="../../public/resources/logo.png">
                <span>成为更好的自己</span>
            </a>
        </h1>


        <!-- 菜单栏 -->
        <div class="left-menu">
            <!-- 创建菜单图标 -->
            <ul class="menu-icon">
                <li></li>
                <li></li>
                <li></li>
            </ul>


            <!-- 创建菜单 -->
            <ul class="nav">
                <!-- 这里都要写在超链接里面 -->
                <li><a href="./../myPlan/myTodo.html">个人计划</a></li>
                <li><a href="./../note-program/index.html">我的笔记</a></li>
                <li><a href="./../minder/mind.html">思维导图</a></li>
                <li><a href="./../dataStatistics/dataStatistics.html">数据统计</a></li>
                <li><a href="./../square/square.html">广场</a></li>
            </ul>

        </div>

        <!-- 用户信息 -->
        <div class="user-info">
            <!-- 这里是可以跳转到用户信息详细设置页的，写用户信息详细设置页的地址 -->
            <a href="javascript:void(0);" id="turnUserInfo">
                <img src="../../public/resources/user-pic.jpg" alt="用户头像">
            </a>
        </div>
    </div>
</div>
<!-- 一：头部统一模板制作 end ************************************-->


<!-- 二：我的计划大模块制作 start ********************************-->
<div class="content">
    <!-- a：左侧导航区域制作 start -->
    <div class="content_left">
        <!-- a.1今日计划导航模块 start -->
        <div class="todayTodo_nav ">
            <p>
                今日计划 &nbsp;
                <span>0/0</span>
            </p>
            <span class="add">
                    +
                </span>

        </div>
        <!-- a.1今日计划导航模块 end -->

        <!-- a.2长期计划导航模块  start-->
        <div class="longTodo_nav">
            <p>
                长期计划 &nbsp;

                <span>0/1</span>
            </p>
            <span class="add">
                    +
                </span>

        </div>
        <!-- a.2长期计划导航模块 end -->

        <!-- a.3倒计时导航模块 start-->
        <div class="countdown_nav">
            <div class="plan-start">
                <p><span>距离:</span> <span>xxx计划</span>开始</p>
                <p><span>倒计时:</span><span>100</span>天</p>

            </div>
            <hr>
            <div class="plan-end">
                <p><span>距离:</span> <span>xxx计划</span>结束</p>
                <p><span>倒计时:</span><span>99</span>天</p>
            </div>
        </div>
        <!-- a.3倒计时导航模块 end-->


    </div>
    <!-- a:左侧导航区域制作 end -->


    <!-- b：右侧详细内容区域制作 start -->
    <!-- b.1： 今日计划详细内容模块 start -->
    <div class="content_right_today">
        <ul class="todo">

        </ul>
        <ul class="hasdown"></ul>
    </div>
    <!-- b.1： 今日计划详细内容模块 end -->
    <!-- b.2： 长期计划详细内容模块 start -->
    <!-- b.2.1：移动端longTodo页头部统一模板制作 start **********************************-->
    <header>
        <span>&lt;</span>
        <span>长期计划</span>
        <button>+</button>
    </header>
    <!-- b.2.1：移动端longTodo页头部统一模板制作 end **********************************-->
    <div class="content_right_long">
        <div class="ing">
            <h3><span>进行中<span>3/29</span></span> <span>结束倒计时</span></h3>
            <ul class="todo">
                <li>
                    <div>
                        <span class="todo_left"><a href="javascript:;"> </a> &nbsp;&nbsp;&nbsp;&nbsp; <span>完成xxx</span></span>
                        <span class="todo_right">
                            <em><span>60</span>天</em>

                            </span>
                    </div>
                    <span class="operations">
                            <a href="javascript:;" class="topping">置顶</a>
                            <a href="javascript:;" class="edit">编辑</a>
                            <a href="javascript:;" class="delete">删除</a>
                        </span>

                </li>
                <li>
                    <div>
                        <span class="todo_left"><a href="javascript:;"> </a> &nbsp;&nbsp;&nbsp;&nbsp; <span>完成xxx</span></span>
                        <span class="todo_right">
                            <em><span>60</span>天</em>

                            </span>
                    </div>
                    <span class="operations">
                            <a href="javascript:;" class="topping">置顶</a>
                            <a href="javascript:;" class="edit">编辑</a>
                            <a href="javascript:;" class="delete">删除</a>
                        </span>

                </li>
                <li>
                    <div>
                        <span class="todo_left"><a href="javascript:;"> </a> &nbsp;&nbsp;&nbsp;&nbsp; <span>完成xxx</span></span>
                        <span class="todo_right">

                            <em><span>60</span>天</em>

                            </span>
                    </div>
                    <span class="operations">
                            <a href="javascript:;" class="topping">置顶</a>
                            <a href="javascript:;" class="edit">编辑</a>
                            <a href="javascript:;" class="delete">删除</a>
                        </span>

                </li>
                <li>
                    <div>
                        <span class="todo_left"><a href="javascript:;"> </a> &nbsp;&nbsp;&nbsp;&nbsp; <span>完成xxx</span></span>
                        <span class="todo_right">

                            <em><span>60</span>天</em>

                            </span>
                    </div>
                    <span class="operations">
                            <a href="javascript:;" class="topping">置顶</a>
                            <a href="javascript:;" class="edit">编辑</a>
                            <a href="javascript:;" class="delete">删除</a>
                        </span>

                </li>

            </ul>
        </div>
        <div class="will">
            <h3><span>未开始<span>3/19</span></span> <span>开始倒计时</span></h3>
            <ul class="todo">
                <li>
                    <div>
                        <span class="todo_left"><a href="javascript:;"> </a> &nbsp;&nbsp;&nbsp;&nbsp; <span>完成xxx</span></span>
                        <span class="todo_right">

                            <em><span>60</span>天</em>

                            </span>
                    </div>
                    <spn class="operations">
                        <a href="javascript:;" class="topping">置顶</a>
                        <a href="javascript:;" class="edit">编辑</a>
                        <a href="javascript:;" class="delete">删除</a>
                    </spn>
                    </span>

                </li>
                <li>
                    <div>
                        <span class="todo_left"><a href="javascript:;"> </a> &nbsp;&nbsp;&nbsp;&nbsp; <span>完成xxx</span></span>
                        <span class="todo_right">

                            <em><span>60</span>天</em>

                            </span>
                    </div>
                    <spn class="operations">
                        <a href="javascript:;" class="topping">置顶</a>
                        <a href="javascript:;" class="edit">编辑</a>
                        <a href="javascript:;" class="delete">删除</a>
                    </spn>
                    </span>

                </li>
                <li>
                    <div>
                        <span class="todo_left"><a href="javascript:;"> </a> &nbsp;&nbsp;&nbsp;&nbsp; <span>完成xxx</span></span>
                        <span class="todo_right">

                            <em><span>60</span>天</em>

                            </span>
                    </div>
                    <span class="operations">
                            <a href="javascript:;" class="topping">置顶</a>
                            <a href="javascript:;" class="edit">编辑</a>
                            <a href="javascript:;" class="delete">删除</a>
                        </span>

                </li>
                <li>
                    <div>
                        <span class="todo_left"><a href="javascript:;"> </a> &nbsp;&nbsp;&nbsp;&nbsp; <span>完成xxx</span></span>
                        <span class="todo_right">
                            <em><span>60</span>天</em>

                            </span>
                    </div>
                    <spn class="operations">
                        <a href="javascript:;" class="topping">置顶</a>
                        <a href="javascript:;" class="edit">编辑</a>
                        <a href="javascript:;" class="delete">删除</a>
                    </spn>
                    </span>

                </li>

            </ul>
        </div>
        <div class="down">
            <h3><span>已结束<span>3/10</span></span> <span>已结束天数</span></h3>
            <ul class="hasdown">
                <li>
                    <div>
                        <span class="todo_left"><a href="javascript:;"> </a> &nbsp;&nbsp;&nbsp;&nbsp; <span>完成xxx</span></span>
                        <span class="todo_right">

                            <em><span>60</span>天</em>

                            </span>
                    </div>
                    <span class="operations">
                            <a href="javascript:;" class="topping">置顶</a>
                            <a href="javascript:;" class="delete">删除</a>
                        </span>
                </li>
                <li>
                    <div>
                        <span class="todo_left"><a href="javascript:;"> </a> &nbsp;&nbsp;&nbsp;&nbsp; <span>完成xxx</span></span>
                        <span class="todo_right">

                            <em><span>60</span>天</em>

                            </span>
                    </div>
                    <span class="operations">
                            <a href="javascript:;" class="topping">置顶</a>
                            <a href="javascript:;" class="delete">删除</a>
                        </span>
                </li>
                <li>
                    <div>
                        <span class="todo_left"><a href="javascript:;"> </a> &nbsp;&nbsp;&nbsp;&nbsp; <span>完成xxx</span></span>
                        <span class="todo_right">

                            <em><span>60</span>天</em>

                            </span>
                    </div>
                    <span class="operations">
                            <a href="javascript:;" class="topping">置顶</a>
                            <a href="javascript:;" class="delete">删除</a>
                        </span>
                </li>
                <li>
                    <div>
                        <span class="todo_left"><a href="javascript:;"> </a> &nbsp;&nbsp;&nbsp;&nbsp; <span>完成xxx</span></span>
                        <span class="todo_right">

                            <em><span>60</span>天</em>

                            </span>
                    </div>
                    <span class="operations">
                            <a href="javascript:;" class="topping">置顶</a>
                            <a href="javascript:;" class="delete">删除</a>
                        </span>
                </li>
                <li>
                    <div>
                        <span class="todo_left"><a href="javascript:;"> </a> &nbsp;&nbsp;&nbsp;&nbsp; <span>完成xxx</span></span>
                        <span class="todo_right">
                            <em><span>60</span>天</em>

                            </span>
                    </div>
                    <span class="operations">
                            <a href="javascript:;" class="topping">置顶</a>
                            <a href="javascript:;" class="delete">删除</a>
                        </span>
                </li>
            </ul>
        </div>


    </div>
    <!-- b.2： 长期计划详细内容模块 end -->
    <!-- b：右侧详细内容区域制作 end -->
</div>
<!-- 二：我的计划大模块制作 end **********************************-->

<!-- 三：遮罩层模块 start**************************************** -->
<div class="mask" style="display: none;">
    <!-- a.遮罩层模块 之 添加/编辑今日计划start -->
    <div class="add_todayTodo" style="display: none;">
        <div class="title">
            添加今日计划
        </div>
        <div>
            <input type="text" placeholder="请输入计划名称" class="name">
            <input type="text" placeholder="分钟" class="time" value="5">
            <select class="classify">
                <option value="eat">饮食</option>
                <option value="sport">运动</option>
                <option value="sleep">睡眠</option>
                <option value="study">学习</option>
                <option value="read">阅读</option>
                <option value="other">其他</option>
            </select>
            <select class="import">
                <option value="one-import">一般</option>
                <option value="two-import">重要</option>
                <option value="three-import">十分重要</option>
            </select>
        </div>
        <div class="lable">
            <span>需要时间</span>
            <span>所属类别</span>
            <span>重要程度</span>
        </div>
        <button class="yes">√</button>
        <button class="no">x</button>
    </div>
    <!-- a.遮罩层模块 之 添加/编辑今日计划end -->
    <!-- a.遮罩层模块 之 添加/编辑长期计划start -->
    <div class="add_longTodo" style="display: none;">
        <div class="title">
            添加长期计划
        </div>
        <div>
            <input type="text" placeholder="请输入计划名称" class="name">
            <div>
                <input type="date" placeholder="开始日期" max="" value="">
                <span>至</span>
                <input type="date" placeholder="结束日期" min="" value="">
            </div>

            <button class="yes">√</button>
            <button class="no">x</button>
        </div>
        <!-- a.遮罩层模块 之 添加/编辑长期计划end -->
    </div>
    <!-- a.遮罩层模块 之 添加/编辑长期计划end -->
</div>
<!-- 三：遮罩层模块 end**************************************** -->


</body>

</html>